<template>
  <div>
    <el-container>
      <el-header>
        <el-menu mode="horizontal"
                 background-color="#fff1a0"
                 text-color="black"
                 active-text-color="#9c9d4f">
          <el-menu-item index="1" >
            购买记录
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <div>
          <table class="order" cellspacing="0" cellpadding="10">
            <tr class="th">
              <th style="width: 300px">订单信息</th>
              <th style="width: 150px">支付费用</th>
              <th style="width: 150px">支付状态</th>
              <th style="width: 150px">支付时间</th>
            </tr>
            <tr v-for="order in orders">
              <td style="width: 300px">
                <div class="img"><img :src="order.course.image" alt=""></div>
                <div class="orderInfo">
                  <div class="orderName"><strong>{{order.course.name}}</strong></div>
                  <div>共{{order.course.chapterNum}}章{{ order.course.sectionNum }}节</div>
                  <div class="price"><strong>￥</strong>{{order.course.price}}</div>
                </div>
              </td>
              <td style="width: 150px">{{order.course.price}}</td>
              <td style="width: 150px">{{order.status}}</td>
              <td style="width: 150px">{{order.time}}</td>
            </tr>
          </table>
        </div>
        <div v-if="this.orders.length===0"
             style="font-size: 25px;margin-left: 200px;margin-top: 100px ">您还没有订单记录哦，请前往
          <a @click="buyCourse()" style="color: burlywood">购买课程</a>
          吧！</div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import router from '../../router';
export default {
  name: "studentorderbuy",
  data() {
    return {
      orders:[],
      orderrefunds:[],
      orderSuccess:[],
    }
  },
  created() {
    //发送请求获取数据
    this.axios.get(this.baseUrl+"order/findallbyid")
      .then(res=>{
        console.log(res.data);
        //
        this.orders = res.data.data;
        //得到订单状态
        for (let i = 0; i <this.orders.length ; i++) {
          if(this.orders[i].status===0){
            this.orders[i].status ="未支付";
          }else if(this.orders[i].status===1){
            this.orders[i].status ="支付成功";
            this.orderSuccess.push(this.orders[i]);
          }else if(this.orders[i].status ===2){
            this.orders[i].status ="支付取消";
          }else if(this.orders[i].status ===3) {
            this.orders[i].status ="退款成功";
            this.orderrefunds.push(this.orders[i]);
          }else if(this.orders[i].status ===4){
            this.orders[i].status ="申请退款";
            this.orderrefunds.push(this.orders[i]);
          }else{
            this.orders[i].status ="退款失败";
            this.orderrefunds.push(this.orders[i]);
          }
          let countx = 0;
          let county = 0;
          for (let j = 0; j < this.orders[i].course.chapters.length; j++) {
            countx++;
            for (let k = 0; k < this.orders[i].course.chapters[j].sections.length; k++) {
              county++;
            }
          }
          //将计数设置到course字段里面
          this.$set(this.orders[i].course, "chapterNum", countx);
          this.$set(this.orders[i].course, "sectionNum", county);
        }
        //将退款订单存入store
        this.$store.commit('setOrders',this.orders)
        this.$store.commit('setOrderrefunds',this.orderrefunds);
        this.$store.commit('setOrderSuccess',this.orderSuccess);
        //遍历章和节
      })
  },
  methods:{
    buyCourse(){
      router.push("/course");
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/student.css";
th,td{
  border: 1px solid;
}
</style>
